import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
import { FullScreenLoader } from '../../components/ui/full-screen-loader';
import { Button } from '../../components/ui/button';

const meta: Meta<typeof FullScreenLoader> = {
  title: 'UI/FullScreenLoader',
  component: FullScreenLoader,
  tags: ['autodocs'],
  parameters: {
    layout: 'fullscreen',
  },
  argTypes: {
    message: {
      control: 'text',
      description: '加载时显示的消息',
    },
  },
};

export default meta;
type Story = StoryObj<typeof FullScreenLoader>;

export const Default: Story = {
  args: {
    message: '加载中，请稍候...',
    demoMode: true,
  },
};

export const WithCustomMessage: Story = {
  args: {
    message: '正在处理您的请求，可能需要几分钟时间...',
    demoMode: true,
  },
};

export const WithToggle: Story = {
  render: function ToggleLoader() {
    const [isLoading, setIsLoading] = React.useState(false);

    const handleToggle = () => {
      setIsLoading(true);
      // 3秒后自动关闭
      setTimeout(() => {
        setIsLoading(false);
      }, 3000);
    };

    return (
      <div className="p-8">
        <Button onClick={handleToggle}>
          {isLoading ? '加载中...' : '显示加载器 (3秒)'}
        </Button>
        {isLoading && <FullScreenLoader message="加载中，请稍候..." demoMode={true} />}
      </div>
    );
  },
};

// 演示切换加载器
export const WithToggleDemo: Story = {
  render: function ToggleLoaderDemo() {
    const [isLoading, setIsLoading] = React.useState(false);

    const handleToggle = () => {
      setIsLoading(true);
      // 3秒后自动关闭
      setTimeout(() => {
        setIsLoading(false);
      }, 3000);
    };

    return (
      <div className="p-8 space-y-4">
        <div className="flex space-x-2">
          <Button onClick={handleToggle} disabled={isLoading}>
            {isLoading ? '加载中...' : '显示加载器 (3秒)'}
          </Button>
        </div>
        
        <div className="border rounded-lg overflow-hidden" style={{ height: '400px' }}>
          <iframe 
            src="about:blank" 
            className="w-full h-full"
            ref={(iframe) => {
              if (iframe && isLoading) {
                const doc = iframe.contentDocument || iframe.contentWindow?.document;
                if (doc) {
                  // 创建基本 HTML 结构
                  doc.open();
                  doc.write(`
                    <!DOCTYPE html>
                    <html>
                      <head>
                        <style>
                          body { margin: 0; font-family: system-ui, sans-serif; }
                          .loader-container { 
                            position: fixed; 
                            inset: 0; 
                            z-index: 9999; 
                            display: flex; 
                            align-items: center; 
                            justify-content: center; 
                            background-color: rgba(0, 0, 0, 0.5);
                            backdrop-filter: blur(4px);
                          }
                          .loader-content {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            gap: 1rem;
                            padding: 1.5rem;
                            background-color: white;
                            border-radius: 0.5rem;
                            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
                          }
                          .spinner {
                            height: 2rem;
                            width: 2rem;
                            border-radius: 9999px;
                            border: 4px solid #3b82f6;
                            border-top-color: transparent;
                            animation: spin 1s linear infinite;
                          }
                          @keyframes spin {
                            to { transform: rotate(360deg); }
                          }
                          .message {
                            color: #374151;
                          }
                        </style>
                      </head>
                      <body>
                        <div class="loader-container">
                          <div class="loader-content">
                            <div class="spinner"></div>
                            <p class="message">加载中，请稍候...</p>
                          </div>
                        </div>
                      </body>
                    </html>
                  `);
                  doc.close();
                }
              }
            }}
          />
        </div>
      </div>
    );
  },
  parameters: {
    docs: {
      story: {
        inline: false,
        height: '500px',
      },
    },
  },
};
